<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>好农易</title>
	<script type="text/javascript" src="js/script.js"></script>
	<link href="css/style.css" rel="stylesheet" />
	<link href="css1/bootstrap.min.css" rel="stylesheet"/>
	<link href="css1/style.css" rel="stylesheet"/>
	<!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="top">
		<div th:replace="mobile/topBar :: page-top-bar"></div>
	</div>
	<!-- top over -->
	
	
	<div class="header">
		<div th:replace="mobile/header :: page-header"></div>
	</div>
	<!-- header over -->

	<div class="navBox yh">
		<div th:replace="mobile/menu :: page-menu"></div>
	</div>
	<!-- nav over -->

	<div class="container main">
		<p class="breadNav"><a th:href="@{/}">首页</a><i>&gt;</i><a th:href="@{initGoods(commodityTypeId=${goodsForm.commodityTypeId})}"><span th:text="${goodsForm.commodityTypeName}">化妆品</span></a><i>&gt;</i>商品详情</p>
		<div class="row goodsBox">
			<div class="col-md-10 detailsBox">
				<div class="row ">
					<div class="col-sm-6 ">
	<div class="banner">
		<div id="tFocus">
			<div class="prev" id="prev"></div>
				<div class="next" id="next"></div>
					<ul id="tFocus-pic">
						<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="338" height="243" alt="商品详细情况" /></li>
						<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="338" height="243" alt="商品详细情况  " /></li>
						<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="338" height="243" alt="商品详细情况" /></li>
						<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="338" height="243" alt="商品详细情况 " /></li>
						<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="338" height="243" alt="商品详细情况" /></li>
					</ul>
	<div id="tFocusBtn">
		<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a>
		<div id="tFocus-btn">
		<ul>
			<li class="active"><img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="87" height="57" alt="商品详细情况" /></li>
			<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="87" height="57" alt="商品详细情况  " /></li>
			<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="87" height="57" alt="商品详细情况" /></li>
			<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="87" height="57" alt="商品详细情况 " /></li>
			<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="87" height="57" alt="商品详细情况" /></li>
		</ul>
		</div>
		<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>
	</div>
		</div>
		<!--tFocus end-->

		<script type="text/javascript">
		addLoadEvent(Focus());
		</script>
	</div>
	<!-- banner over -->
					</div>
					<form  name="goodsForm" action="submit" th:object="${goodsForm}" method="post">
					<div class="col-sm-6">
					<input type="hidden" name="commodityId" th:value="${goodsForm.commodityId}"/>
					<input type="hidden" name="commodityTypeId" th:value="${goodsForm.commodityTypeId}"/>
						<h4 class="yh detailsT"><span th:text="${goodsForm.commodityName}">裕道府东北有机小米食用米 粗粮黄小米 五谷杂粮月子米</span></h4>
						<dl class="dl-horizontal detailsInfo cf">
					        <dt>零售价：</dt>
					        <dd class="price yh"><i>￥</i><span name="retailPrice" th:text="${goodsForm.retailPrice}">128</span></dd>
					        <dt>运 费 ：</dt>
					        <dd>金额不足88元加8元运费， 超过88元包邮</dd>
					        <dt>品  牌：</dt>
					        <dd><span th:text="${goodsForm.brandName}">日思</span></dd>
					        <dt>经销商：</dt>
					        <dd><span th:text="${goodsForm.supplierName}">天津日思优质小站稻开发公司</span></dd>
					        <dt>规  格：</dt>
					        <dd>每<span th:text="${#strings.concat(goodsForm.unit).concat(goodsForm.specifications)}">袋5kg</span></dd>
					        <dt>库  存：</dt>
					        <dd><span th:text="${goodsForm.stock}">99</span></dd>
					        <dt>数  量：</dt>
					        <dd style="height:32px;">
					        	<div class="chooseAmount mt5">
					        		<a onclick="subNum();" href="javascript:void(0)"></a>
					        		<input readonly="readonly" type="text" name="count" id="count" class="fl inp-t" value="1"/>
					        		<a onclick="addNum();"  href="javascript:void(0)"></a>
					        	</div>
					        </dd>
					    </dl>
					    <p class="mt20"><button class="btnBlue yh " name="AlipaySubmit" >立即购买</button><button class="btnYellow yh" name="addCart" >加入购物车</button></p>
					</div>
					</form>
				</div>
				<h4 class="yh detailsT"><span th:text="${message}"></span></h4>

				<h4 class="detailImgT mt30"><span>更多细节展示</span></h4>
				<div class="detailImgBox mt15">
					<img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height: 500px; width: 867px;" alt=""/>
					<img th:src="@{showImage(pictureId=${goodsForm.pictureId6})}" style="height: 500px; width: 867px;" alt=""/>
				</div>
				
			</div>
			
			<div class="col-md-2 goodsHot">
				<h4 class="h5 link yh goodsHotT">热卖榜</h4>
				<ul class="row goodsHotList">
					<li class="col-md-12 col-sm-3 col-xs-6 cf" th:each="oderInfo,sts:${orderlist}">
						<div class="pic"><a th:href="@{initGoodsDetail(commodityId=${oderInfo.commodityId})}"><img th:src="@{showImage(pictureId=${oderInfo.pictureId})}" alt=""/></a></div>
						<div class="tit">
							<h4><a th:href="@{initGoodsDetail(commodityId=${oderInfo.commodityId})}"><span th:text="${oderInfo.commodityName}">谷绿农品有机小米</span></a></h4>
							<p>￥<span th:text="${oderInfo.retailPrice}">15</span>元</p>
						</div>
					</li>
				</ul>
			</div>
			
		</div>
		
	</div>
	<!-- 商品列表 over -->

	<footer class="foot mt20 tc">
		<div th:replace="mobile/footer :: page-footer"></div>
		
	</footer>
	<!--footer over  -->
	<script src="js1/jquery-1.11.3.min.js"></script>
	<script src="js1/bootstrap.min.js"></script>
	<script src="js1/jquery-latest.min.js"></script>
	<script src="js1/unslider.min.js"></script>
	<script src="js1/jquery.event.move.js"></script>
	<script src="js1/jquery.event.swipe.js"></script>
	<script src="js1/comm.js"></script>
	<script type="text/javascript">
	function addNum() {
		document.getElementById("count").value = parseInt(document
				.getElementById("count").value) + 1;
	}
	function subNum() {

		if (document.getElementById("count").value == "1") {
			return;
		}

		document.getElementById("count").value = parseInt(document
				.getElementById("count").value) - 1;
	}
</script>
</body>
</html>